
//左侧导航栏

var sub = $(".sort .sub");
var activeRow;
var activeMenu;

$(".sort").on("mouseenter", function () {
    sub.removeClass("none");
}).on("mouseleave", function (e) {
    sub.addClass("none");
    if (activeRow) {
        activeRow.removeClass("active");
        activeRow = null;
    }
    if (activeMenu) {
        activeMenu.addClass("none");
        activeMenu = null;
    }
}).on("mouseenter", ".sortlist li", function () {
    if (activeRow) {
        activeRow.removeClass("active")
        activeMenu.addClass("none");
    }

    activeRow = $(this)
    activeRow.addClass("active")
    activeMenu = $("#" + activeRow.data("id"));
    activeMenu.removeClass("none");
})





/*
 * 
 *轮播图
 * 
 */
// 1. 重要的知识点
// 页面中表示显示的图片下标的容器变量有且只能有一个!
// 当前显示的图片下标!  重要!!! 所有的运算都和这个下标有关
var slide_index = 0;

var slide_prev = 0;

var button_next_ele = document.querySelector(".button-next");
var button_prev_ele = document.querySelector(".button-prev");

var slides = document.querySelectorAll(".slide");  // 记住这里是获取到所有的slide
var slide_count = slides.length;
button_next_ele.onclick = function () {
    slide_prev = slide_index;
    if (slide_index === slide_count - 1) {
        slide_index = 0;
    } else {
        slide_index++;
    }
    slide_animate();
}
button_prev_ele.onclick = function () {
    slide_prev = slide_index;
    if (slide_index === 0) {
        slide_index = slide_count - 1;  // 这里不用全等
    } else {
        slide_index--;
    }
    slide_animate();
}
function slide_animate() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].className = slides[i].className.replace(/\s?slide-(active|prev)/g, "")
    }
    slides[slide_index].className += " slide-active";
    slides[slide_prev].className += " slide-prev";

    // 淡入淡出
    // slides[slide_index].style.opacity = 0;
    // animate( slides[slide_index] , 1 , "opacity");
    // 从左到右
    // slides[slide_index].style.width = 0;
    // animate( slides[slide_index] , 590 , "width");
    // 下拉动画
    // slides[slide_index].style.width = 0;
    // animate( slides[slide_index] , 590 , "width");
    // 提取相似的数据，把不一样的拿出来
    var animate_list = [
        {
            attr: "opacity",
            target: 1
        },
        // {
        //       attr    : "height",
        //       target  : 470
        // },
        // {
        //       attr    : "width",
        //       target  : 590
        // }
    ]
    // 获取随机动画数据
    // var animate_data = animate_list[ parseInt( Math.random() * 3)];
    var animate_data = animate_list[0];
    slides[slide_index].style[animate_data.attr] = 0;
    animate(slides[slide_index], animate_data.target, animate_data.attr);

}


function animate(ele, target, attr) {
    // 1. 关闭开启定时器 :
    //     1. 防止定时器多开导致定时器抛空无法关闭;
    //     2. 防止定时器变量冲突;
    clearInterval(ele.t);
    // 2. 获取当前元素的位置;
    var attr_value = getComputedStyle(ele)[attr];
    // 3. 处理获取到的元素位置 => 100px || 0.3 
    // 100px =parseInt> 100;
    // 0.3   = * 100>   30 
    var iNow = attr === "opacity" ? parseInt(attr_value * 100) : parseInt(attr_value);
    // * 当运动属性为 opacity 的时候目标点应该随着当前的attr值扩大100倍;
    target = attr === "opacity" ? target * 100 : target;
    // 定时器 : 
    ele.t = setInterval(function () {
        // 4. 计算速度 : target - iNow  => 距离 ;
        // 速度为距离的 十分之一 ;
        var speed = (target - iNow) / 10;
        // 速度需要进行取整 ? 如果不取整根据我们每次走十分之的算法一辈子都到达不了目标点;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        // 5. 根据inow重新计算元素位置;
        iNow = iNow + speed;
        // 6. 进行数据的赋值，让元素运动起来;
        ele.style[attr] = attr === "opacity" ? iNow / 100 : iNow + "px";
        // 7. 在到达目标点之后关闭定时器;
        if (iNow === target) {
            clearInterval(ele.t);
        }
    }, 30)
}

// 自动播放;
var t = setInterval(function () {
    button_next_ele.onclick();
}, 3000)
// 给轮播图写上一个终止时间;
var banner_ele = document.querySelector(".banner");
// onmouseover会在子集移入移出的时候触发事件;
// 这两个事件一定要配对使用!!!;
// onmouseover => onmouseenter;
// onmouseout  => onmouseleave
banner_ele.onmouseenter = function () {
    clearInterval(t);
}
banner_ele.onmouseleave = function () {
    t = setInterval(function () {
        button_next_ele.onclick();
    }, 3000)
}


// 以下功能在1220复制的
/** 
 * (免登陆等功能在页面的功能添加处)
 * (启动页面则是启动已经添加了的功能)
 * 【该 JS 有三个功能: 免登陆、分页（分页自带渲染）、楼梯】
 */


/**
 *   免登陆功能
 */
function CookieLogin() {
    this.init();
    this.bindEvent();
}

CookieLogin.prototype = {
    constructor: CookieLogin,
    init: function () {
        var cookie_string = getCookie("USRID");
        var nav_list = $("#navbar .nav");
        var user_name = $("#user_name");
        // 判定cookieString里面的内容是否符合我们的json规则;
        // 1. cookie_string 是一个字符串;
        // 2. 判定字符串的规则;
        var res_json = /^\{[\s*"\w+":"\w+",*\s*]+\}$/;
        if (res_json.test(cookie_string)) {
            // 让第一个显示出来;
            nav_list.eq(1).addClass("active");
            user_name.html(JSON.parse(cookie_string).username);
        } else {
            // 让登陆注册显示出来;
            nav_list.eq(0).addClass("active");
        }
    },
    bindEvent: function () {
        $("#signout").click(function () {
            this.signout();
        }.bind(this))
    },
    signout: function () {
        removeCookie("USRID", "/");
        location.reload();
    }
}




/**
*    分页
*/
function Pagination() {
    this.init();
    this.bindEvent();
}

Pagination.prototype = {
    constructor: Pagination,
    init: function () {
        // 从后端加载来的所有数据;
        this.data_g = null;
        // 商品的总数;
        this.total = null;
        // 每页显示的数量
        this.show_count = 4;
        // 当前显示的页码
        this.page_index = 0;

        var _ = this;
        // 程序的基本模板;
        class MyMount extends Mount {
            render(res) {
                var list = res.items;
                var html = "";

                for (var i = _.show_count * _.page_index; i <= _.show_count * _.page_index + 3; i++) {
                    // 如果数据为空跳出循环
                    if (!list[i]) break;
                    html += `<div class="col-md-3 goods-item" data-id="${list[i].data.id}" data-index=${i}>
                                        <img class="img-thumbnail" src="${list[i].data.hd_thumb_url}" alt="">
                                        <p title="${list[i].data.goods_name}">${list[i].data.goods_name}</p>
                                        <h2>${(list[i].data.normal_price / 100).toFixed(2)}</h2>
                                  </div>`;
                }
                return html;
            }
        }

        this.myMount = new MyMount({
            url: "http://localhost/pxxspike",
            data: {
                pdduid: 0,
                page: 1,
                size: 30,
                list_id: "promotion_subject21933_8tdjNJ_spike_1_0",
                day_type: 1,
                tab: 0,
                component_mark: "20190822_sub_21933_秒杀商品-赛马专属-周促",
                anti_content: "0anAfanUdilYq9dVyruXwHj_G2ZC_tg1CJXZv86_pXSTHnS-tG_XUX5-FFsiAXjkwXMpvfnzLC2JC1mkVEHlT9Hc9sz1v9OzeRNRGjWNlTz9t9hr9fOPodA8ZUoMYMiU2__QxdR_R3zRtD9SrA_8ig2c-Ydk6jviqUSm6Y64SK0iPXzYyNfYbpy1kLMweV-7nHgEIDCrkITSZG7x3IPZxEOVsiho5-QBZyKrcxy7rkaQ3YuYO3u-HZeLOkRka8iWaBwrbey8aVMLzepm1WD8HWJkAaYZdyKcifp7hFFXlXiqRaklGeOXRloGPtml3-PiW1otCXPaI5IgjkesshEf4eFR12RmY7PKrsP6XSxuZm08gueSS0_di9PJ4Ftiwn4BGdnxI02DBKCridiYG9PKV_ld2tZsH9qFBm1HxYKaeZsKHM4YfT5mjKgFUUJ5kGAsl3Veupk_Bo0Z_lY7Zf9dtBBZjBapDXHYf-BymbgqFQmycIPvTMzr4Oyr-sZBHW1zvF-WXG0TuIS5sSknu7lSlrl8biSzDIC3ZzQsHzaAKLPWiB3yulow-yHk9p8y6go0kKY8oEMksn8h0Gc4AEvE-MWAgO8LOUiSjPLhSqG5jbnwcHCh54I3Ypk1iDTMShxthTtQjW5S2NuJ6WMIONyiReJbW6V7iwNOJJ"
            },
            main: ".goods-list",
            loaded: function (res) {
                // console.log(res);
                this.total = res.items.length;
                this.data_g = res;
                this.renderPagination();
            }.bind(this)
        });

    },
    bindEvent: function () {
        $(".pagination").on("click", "li", this.changePage.bind(this));
    },
    renderPagination: function () {
        var pagination_html = `<li>
                                        <a href="#" aria-label="Previous">
                                              <span aria-hidden="true">&laquo;</span>
                                        </a>
                                  </li>`;
        for (var i = 0; i < Math.ceil(this.total / this.show_count); i++) {
            pagination_html += `<li><a href="javascript:void(0)">${i + 1}</a></li>`;
        }
        pagination_html += `<li>
                                  <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                  </a>
                            </li>`;
        document.querySelector(".pagination").innerHTML = pagination_html;
    },
    changePage: function (evt) {
        var e = evt || event;
        var target = e.target || e.srcElement;
        this.page_index = target.innerText - 1;
        var html = this.myMount.render(this.data_g);
        $(".goods-list").html(html);
    }
}


/**
*   楼梯
*/

// 程序其实就是根据数据做做出相应处理的代码;
// 逻辑 : 数据(scrollTop) , 阈值 ( : 650);
function Stairs() {
    this.init();
    this.bindEvent();
}
// 面向对象的原型高级写法;
Stairs.prototype = {
    constructor: Stairs,
    init: function () {
        // 选择元素;
        // 楼梯按钮;
        this.$floor_bar = $(".floor-bar");
        this.$floor_btn = this.$floor_bar.find("li");
        // 计算获得所有的元素top值;
        this.floor_top_list = [];
        this.$floor_ele = $(".modlue");
        //找到每一个元素,并且获取到每一个元素的top值，放入到floor_top_list之中;
        for (var i = 0; i < this.$floor_ele.length; i++) {
            this.floor_top_list.push(this.$floor_ele.eq(i).offset().top);
        }
        // console.log(this.floor_top_list);
    },
    bindEvent: function () {
        // $(window).scroll(function(){
        //       // this => window; 
        //       // this => 实例对象!;
        //       console.log(this);
        // }.bind(this))
        // 考虑兼容性可以将 bind替换成 jQuery $.proxy( fn , this ) ;
        $(window).scroll($.proxy(function () {
            // this => window; 
            // this => 实例对象!;
            var st = $("html,body").scrollTop();
            if (st >= 650) {
                this.toggle("show");
            } else {
                this.toggle("hide");
            }

            this.changeFloorBtn(st);
        }, this))

        $(window).trigger("scroll");

        // 解决index不靠谱用的特殊方案;
        // this.$floor_btn.attr({
        //       "data-id" : function(index){
        //             return index;
        //       }
        // })

        this.$floor_btn.click(function (evt) {
            // 如何获取到元素的下标那? 
            // index 方法;
            // console.log($(this));
            var e = evt || event;
            var target = e.target || e.srcElement;
            // target 是原生dom对象,所以需要 $(target) 才能使用jQuery方法; 

            // console.log($(target).index());
            // index() => 的查找机制 找到当前元素的父级，然后在父级之中查找当前元素所在的下标;

            this.changeFloor($(target).index());
        }.bind(this))
    },
    // 按钮显示隐藏
    toggle: function (type) {
        switch (type) {
            case "show":
                this.$floor_bar.show();
                break;
            case "hide":
                this.$floor_bar.hide();
                break;
        }
    },
    // 切换楼层按钮
    changeFloorBtn: function (st) {
        // 当前楼层的判定 : 大于当前下标的值同时小于下标+1 对应的值;
        // [100,200,300,400]
        this.floor_top_list.some(function (item, index, arr) {
            // 如果这是最后一项 , st 大于了最后一项;
            if (index === this.floor_top_list.length - 1 && st > item) {
                // 最后一层楼;
                this.$floor_btn.eq(index).addClass("active")
                    // 删除所有其他的active;
                    .siblings(".active").removeClass("active");
                // 如果已经判定成功则终止 some循环;
                return true;
            }
            // 如果当前的st值大于了前一项,同时小于后一项;
            if (st >= item && st < arr[index + 1]) {
                this.$floor_btn.eq(index).addClass("active")
                    // 删除所有其他的active;
                    .siblings(".active").removeClass("active");
                // 如果已经判定成功则终止 some循环;
                return true;
            }
            // 小任务 : 两逻辑合并一下;
        }.bind(this));

    },
    // 切换楼层
    changeFloor: function (index) {
        $("html,body").scrollTop(this.floor_top_list[index] + 1);
    }
}

new Stairs()



/**
* 
* 页面的功能添加;
* (如果页面没有上述功能，那么在这个添加出注释掉就可以)
* 
*/

var init_index = $.Callbacks();

init_index.add(function () {
    new CookieLogin();  //免登陆功能
})

init_index.add(function () {
    new Pagination();  // 分页
})

init_index.add(function () {
      new Stairs();  // 楼梯
})



/**
* 启动页面 
*/

$(function () {
    init_index.fire()
})
